<template>
  <page-container>
    <a-card size="small" class="element-list-area">
      <a-checkable-tag
        v-for="(item, index) in elementList"
        :checked="item.name === checkedTag"
        @change="handleChange(item)"
        :key="index"
      >
        <span :style="{ fontSize: '16px' }">
          <i
            v-if="index != 0"
            v-html="topList.icon[index]"
            :style="{ color: item.name === checkedTag ? '#fff' : topList.color[index] }"
            class="iconfont"
          ></i>
          {{ item.name }}
        </span>
      </a-checkable-tag>
    </a-card>
    <a-card size="small">
      <a-form :wrapper-col="{ span: 16 }">
        <a-row :gutter="5">
          <a-col :span="6">
            <a-form-item label="状态" :wrapper-col="{ span: 19 }">
              <a-select v-model:value="statusSelect" @change="queryStatusChange">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">已启用</a-select-option>
                <a-select-option value="0">未启用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="模型名称">
              <a-input-search
                allowClear
                v-model:value="modelName"
                class="methods-name"
                @search="onSearch"
                placeholder="输入事件名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <!-- <a-range-picker
            style="width: 280px"
            :valueFormat="historyDateFormat"
            v-model:value="historyDate"
            :format="historyDateFormat"
            @change="dateChange"
          /> -->
            <a-form-item label="设置时间" style="width: 100%">
              <pickers
                :data="historyDate"
                @setTime="dateChange"
                style="width: 280px; display: inline"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-spin :spinning="spinning">
      <a-row class="page-box">共 {{ total }} 个模型</a-row>

      <a-row :gutter="16" class="model-list" v-if="modelList.length">
        <a-col class="gutter-row" v-for="(item, index) in modelList" :key="index" :span="6">
          <div class="gutter-box">
            <div class="model-title" :class="tagType(item.classifyType)">
              <div class="triangle"></div>
              {{ item.name }}
              <a-popconfirm title="是否确认删除？" @confirm="modelDelete(item)">
                <delete-outlined class="icon-delete" />
              </a-popconfirm>
            </div>
            <div class="box-btm">
              <div class="btm-in-top">
                <span
                  class="inline-block"
                  @click="warningClick"
                  style="width: 20%; text-align: center"
                >
                  <span class="warn-count">{{ item.yjNum }}</span>
                  <br />
                  <span class="warn-count-text">预警数量</span>
                </span>
                <a-divider type="vertical" style="height: 70px; vertical-align: bottom" />
                <span class="inline-block" style="width: 20%; text-align: center">
                  <span class="warn-count">{{ item.ruleNum }}</span>
                  <br />
                  <span class="warn-count-text">规则数量</span>
                </span>
                <a-divider type="vertical" style="height: 70px; vertical-align: bottom" />
                <span class="inline-block">
                  {{ item.createTime }}
                  <br />
                  <div class="relative area-box">
                    <span class="warn-count-text">辖区：</span>
                    <div style="height: 42px; overflow: hidden">
                      <a href="javascript:;" class="a-text-style">
                        {{ item.xqdwName }}
                      </a>
                    </div>
                  </div>
                </span>
              </div>
              <a-divider style="margin: 0" />
              <div class="btm-in-btm">
                <a-switch
                  :checked="item.state"
                  @change="statusChange(item, $event)"
                  :checkedValue="1"
                  :unCheckedValue="0"
                />
                <a href="javascript:;" class="a-text-style">
                  {{ item.state ? '已启用' : '未启用' }}
                </a>
                <a-button type="link" size="small" class="icon-edit" @click="editModel(item)">
                  <template #icon>
                    <edit-outlined />
                    &nbsp;&nbsp;修改技战法
                  </template>
                </a-button>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-empty v-else :delay="500" />
    </a-spin>

    <div v-if="modelList.length" style="text-align: center">
      <a-pagination
        v-model:current="page"
        v-model:pageSize="size"
        :total="total"
        @showSizeChange="onShowSizeChange"
        @change="onChange"
      />
    </div>
    <set-model
      v-model:visible="modelVisible"
      :modelId="currentModelId"
      @commit="modelCommit"
    ></set-model>
  </page-container>
</template>

<script lang="ts">
import { Moment } from 'moment';
import { defineComponent, onMounted, ref, toRaw } from 'vue';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import SetModel from './components/set-model/index.vue';
import { useRouter } from 'vue-router';
import { queryModelList, updateModelState, deleteModel } from '@/api/magic-cube/model-list';
import pickers from '@/components/s-picker/picker.vue';
interface modelDemo {
  name: string;
  resultNum: number;
  ruleNum: number;
  isAI: boolean;
  createTime: string;
  xqdwName: string[];
  state: number;
  classifyType: string;
}
export default defineComponent({
  components: {
    SetModel,
    DeleteOutlined,
    EditOutlined,
    pickers,
  },
  setup() {
    const router = useRouter();
    const spinning = ref<boolean>(false);
    const statusSelect = ref<string>('');
    const modelName = ref<string>('');
    const checkedTag = ref('全部');
    const elementList = ref([
      { name: '全部', code: '' },
      { name: '智能分类', code: '1' },
      { name: '接警分类', code: '2' },
      { name: '反馈分类', code: '3' },
    ]);
    const topList = ref({
      color: ['', '#e99220', '#1ccaff', '#3191ff'],
      icon: ['', '&#xe6ac;', '&#xe6b1;', '&#xe6b2;'],
    });
    const onSearch = (searchValue: string) => {
      modelName.value = searchValue;
      queryList();
    };
    const historyDate = ref<Moment[]>([]);
    const historyDateFormat = 'YYYY-MM-DD';
    const size = ref(12);
    const page = ref(1);
    const modelList = ref<Array<modelDemo>>([]);
    const paramState = {
      classifyType: '',
    };
    const modelVisible = ref(false);
    const currentModelId = ref('');
    const tagType = (row: string): any => {
      const map = {
        1: 'ai-title',
        2: 'jq-title',
        3: 'fk-title',
      };
      return map[row];
    };
    const queryStatusChange = val => {
      statusSelect.value = val;
      queryList();
    };
    const dateChange = val => {
      historyDate.value = val;
      queryList();
    };
    //  分页数据总量值
    const total = ref<number>(0);
    const onShowSizeChange = (pageNumber: number, sizeNumber: number) => {
      page.value = 1;
      size.value = sizeNumber;
      queryList();
    };
    const onChange = (pageNumber: number) => {
      page.value = pageNumber;
      queryList();
    };

    const queryList = async () => {
      const params = {
        callTimeStart: historyDate.value[0] || '', //开始时间
        callTimeEnd: historyDate.value[1] || '', // 结束时间
        page: toRaw(page.value), // 页码
        size: toRaw(size.value), // 条数
        state: toRaw(statusSelect.value), // 状态（1-开启，0-关闭）
        name: modelName.value, // 模型名称
        ...paramState,
      };
      spinning.value = true;
      queryModelList(params)
        .then(res => {
          if (res.code && res.code === 200) {
            total.value = res.data.count;
            modelList.value = res.data.detail;
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    const modelDelete = async item => {
      const params = {
        modelId: item.modelId,
      };
      const res = await deleteModel(params);
      if (res.code && res.code === 200) {
        message.success('删除成功！');
        queryList();
      }
    };

    const statusChange = async (item, e) => {
      const params = {
        modelId: item.modelId, // 模型id
        state: e ? 1 : 0, //  状态（1-开启，0-关闭）
      };
      const res = await updateModelState(params);
      if (res.code === 200) {
        queryList();
        message.success('状态修改成功！');
      } else {
        message.info('状态修改失败！');
      }
    };

    const editModel = item => {
      modelVisible.value = true;
      currentModelId.value = item.modelId;
    };

    const modelCommit = () => {
      queryList();
    };

    //头部接口
    const handleChange = item => {
      checkedTag.value = item.name;
      paramState.classifyType = item.code;
      queryList();
    };
    //跳转预警中心
    const warningClick = () => {
      router.push({
        path: '/early-warning/four-color-warning',
      });
    };

    onMounted(() => {
      queryList();
    });

    return {
      spinning,
      modelName,
      onSearch,
      statusSelect,
      historyDateFormat,
      historyDate,
      size,
      page,
      total,
      modelList,
      onShowSizeChange,
      onChange,
      queryList,
      statusChange,
      queryStatusChange,
      dateChange,
      modelDelete,
      editModel,
      tagType,
      modelVisible,
      currentModelId,
      modelCommit,
      checkedTag,
      topList,
      elementList,
      handleChange,
      warningClick,
    };
  },
});
</script>

<style scoped lang="less">
.model-title {
  .triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 32px solid;
    border-right: 36px solid transparent;
    &::before {
      position: absolute;
      top: -44px;
      left: 2px;
      color: #3b3d44;
      font-weight: 600;
      font-size: 12px;
      word-break: keep-all;
      content: 'AI';
    }
  }
  &.ai-title {
    color: #e99220;
    .triangle {
      &::before {
        border-top-color: #e99220;
        content: 'AI';
      }
    }
  }

  &.jq-title {
    color: #1ccaff;
    .triangle {
      &::before {
        border-top-color: #1ccaff;
        content: '接';
      }
    }
  }
  &.fk-title {
    color: #3191ff;
    .triangle {
      &::before {
        border-top-color: #3191ff;
        content: '反';
      }
    }
  }
}

:deep(.ant-pagination-total-text) {
  float: left;
}
.relative {
  position: relative;
}
.inline-block {
  display: inline-block;
}
.gutter-box {
  margin-bottom: 20px;
  color: #b9c4dd;
  border: 1px solid transparent;
  .model-title {
    position: relative;
    height: 48px;
    padding: 0 20px;
    font-size: 18px;
    line-height: 48px;
    background: #3b3d44;
    .triangle-topleft {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      width: 0;
      height: 0;
      border-top: 35px solid #e99220;
      border-right: 35px solid transparent;
    }

    .icon-delete {
      position: absolute;
      top: 14px;
      right: 20px;
      color: #b9c4dd;
    }
  }
  .box-btm {
    min-height: 132px;
    padding: 0 22px;
    background: #2b2d33;
    .btm-in-top {
      padding: 12px 0;
      .warn-count {
        font-size: 30px;
      }
      .warn-count-text {
        color: #67718f;
        font-size: 12px;
      }
      .area-box {
        padding-left: 40px;
        .warn-count-text {
          position: absolute;
          top: 0;
          left: 0;
        }
        .a-text-style {
          display: block;
          color: #b9c4dd;
          line-height: 22px;
        }
      }
    }
    .ant-divider {
      background: #3c3f48;
    }
    .btm-in-btm {
      position: relative;
      padding: 10px 0 14px;
      line-height: 22px;
      .a-text-style {
        margin-left: 10px;
        color: #b9c4dd;
        line-height: 22px;
        vertical-align: middle;
        cursor: text;
      }
      .icon-edit {
        position: absolute;
        top: 10px;
        right: 0;
        z-index: 10;
        width: 100px;
      }
    }
  }
}
.gutter-box:hover {
  border-color: #3674f6;
  cursor: pointer;
}
.page-box {
  margin-top: 0 !important;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 14px 20px;
  padding: 14px 20px;
  text-align: right;
  background: #2b2d33;
}
.element-list-area {
  .ant-card-body {
    padding: 14px 24px;
    .ant-tag {
      margin-right: 40px;
      padding: 2px 8px;
      border-radius: 12px;
    }
  }
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>
